<template>
	<view class="container">
		<view class="flex diygw-col-24 flex-wrap">
			<view class="diygw-avatar green margin-xs radius">
				<text class="diy-icon-shop"></text>
			</view>
			<view class="diygw-avatar red margin-xs radius">
				<text class="diy-icon-shopfill"></text>
			</view>
			<view class="diygw-avatar orange margin-xs radius">
				<text class="diy-icon-settings"></text>
			</view>
			<view class="diygw-avatar yellow margin-xs radius">
				<text class="diy-icon-similar"></text>
			</view>
			<view class="diygw-avatar olive margin-xs radius">
				<text class="diy-icon-sound"></text>
			</view>
			<view class="diygw-avatar cyan margin-xs radius">
				<text class="diy-icon-activityfill"></text>
			</view>
			<view class="diygw-avatar brown margin-xs radius">
				<text class="diy-icon-subscription"></text>
			</view>
			<view class="diygw-avatar blue margin-xs radius">
				<text class="diy-icon-addressbook"></text>
			</view>
			<view class="diygw-avatar purple margin-xs radius">
				<text class="diy-icon-text"></text>
			</view>
			<view class="diygw-avatar red margin-xs radius">
				<text class="diy-icon-attentionfavor"></text>
			</view>
			<view class="diygw-avatar gradual-red margin-xs radius">
				<text class="diy-icon-time"></text>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius">
				<text class="diy-icon-apps"></text>
			</view>
			<view class="diygw-avatar gradual-green margin-xs radius">
				<text class="diy-icon-unlock"></text>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius">
				<text class="diy-icon-card"></text>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius">
				<text class="diy-icon-backdelete"></text>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius">
				<text class="diy-icon-baby"></text>
			</view>
			<view class="diygw-avatar gradual-purple margin-xs radius">
				<text class="diy-icon-barcode"></text>
			</view>
			<view class="diygw-avatar gradual-pink margin-xs radius">
				<text class="diy-icon-cameraadd"></text>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-wrap">
			<view class="diygw-avatar green margin-xs radius-md">
				<text class="diy-icon-shop"></text>
			</view>
			<view class="diygw-avatar red margin-xs radius-md">
				<text class="diy-icon-shopfill"></text>
			</view>
			<view class="diygw-avatar orange margin-xs radius-md">
				<text class="diy-icon-settings"></text>
			</view>
			<view class="diygw-avatar yellow margin-xs radius-md">
				<text class="diy-icon-similar"></text>
			</view>
			<view class="diygw-avatar olive margin-xs radius-md">
				<text class="diy-icon-sound"></text>
			</view>
			<view class="diygw-avatar cyan margin-xs radius-md">
				<text class="diy-icon-activityfill"></text>
			</view>
			<view class="diygw-avatar brown margin-xs radius-md">
				<text class="diy-icon-subscription"></text>
			</view>
			<view class="diygw-avatar blue margin-xs radius-md">
				<text class="diy-icon-addressbook"></text>
			</view>
			<view class="diygw-avatar purple margin-xs radius-md">
				<text class="diy-icon-text"></text>
			</view>
			<view class="diygw-avatar red margin-xs radius-md">
				<text class="diy-icon-attentionfavor"></text>
			</view>
			<view class="diygw-avatar gradual-red margin-xs radius-md">
				<text class="diy-icon-time"></text>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius-md">
				<text class="diy-icon-apps"></text>
			</view>
			<view class="diygw-avatar gradual-green margin-xs radius-md">
				<text class="diy-icon-unlock"></text>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius-md">
				<text class="diy-icon-card"></text>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius-md">
				<text class="diy-icon-backdelete"></text>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius-md">
				<text class="diy-icon-baby"></text>
			</view>
			<view class="diygw-avatar gradual-purple margin-xs radius-md">
				<text class="diy-icon-barcode"></text>
			</view>
			<view class="diygw-avatar gradual-pink margin-xs radius-md">
				<text class="diy-icon-cameraadd"></text>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-wrap">
			<view class="diygw-avatar green margin-xs radius">
				<view> D </view>
			</view>
			<view class="diygw-avatar red margin-xs radius">
				<view> I </view>
			</view>
			<view class="diygw-avatar orange margin-xs radius">
				<view> Y </view>
			</view>
			<view class="diygw-avatar yellow margin-xs radius">
				<view> 可 </view>
			</view>
			<view class="diygw-avatar olive margin-xs radius">
				<view> 视 </view>
			</view>
			<view class="diygw-avatar cyan margin-xs radius">
				<view> 化 </view>
			</view>
			<view class="diygw-avatar brown margin-xs radius">
				<view> 专 </view>
			</view>
			<view class="diygw-avatar blue margin-xs radius">
				<view> 注 </view>
			</view>
			<view class="diygw-avatar purple margin-xs radius">
				<view> 做 </view>
			</view>
			<view class="diygw-avatar red margin-xs radius">
				<view> 好 </view>
			</view>
			<view class="diygw-avatar gradual-red margin-xs radius">
				<view> 的 </view>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius">
				<view> 可 </view>
			</view>
			<view class="diygw-avatar gradual-green margin-xs radius">
				<view> 视 </view>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius">
				<view> 化 </view>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius">
				<view> 工 </view>
			</view>
			<view class="diygw-avatar gradual-pink margin-xs radius">
				<view> 具 </view>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-wrap">
			<view class="diygw-avatar green margin-xs radius-xs">
				<view> D </view>
			</view>
			<view class="diygw-avatar red margin-xs radius-xs">
				<view> I </view>
			</view>
			<view class="diygw-avatar orange margin-xs radius-xs">
				<view> Y </view>
			</view>
			<view class="diygw-avatar yellow margin-xs radius-xs">
				<view> 可 </view>
			</view>
			<view class="diygw-avatar olive margin-xs radius-xs">
				<view> 视 </view>
			</view>
			<view class="diygw-avatar cyan margin-xs radius-xs">
				<view> 化 </view>
			</view>
			<view class="diygw-avatar brown margin-xs radius-xs">
				<view> 专 </view>
			</view>
			<view class="diygw-avatar blue margin-xs radius-xs">
				<view> 注 </view>
			</view>
			<view class="diygw-avatar purple margin-xs radius-xs">
				<view> 做 </view>
			</view>
			<view class="diygw-avatar red margin-xs radius-xs">
				<view> 好 </view>
			</view>
			<view class="diygw-avatar gradual-red margin-xs radius-xs">
				<view> 的 </view>
			</view>
			<view class="diygw-avatar gradual-orange margin-xs radius-xs">
				<view> 可 </view>
			</view>
			<view class="diygw-avatar gradual-green margin-xs radius-xs">
				<view> 视 </view>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius-xs">
				<view> 化 </view>
			</view>
			<view class="diygw-avatar gradual-blue margin-xs radius-xs">
				<view> 工 </view>
			</view>
			<view class="diygw-avatar gradual-pink margin-xs radius-xs">
				<view> 具 </view>
			</view>
		</view>
		<view class="flex diygw-col-24 justify-between">
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid1.png"></image>
			</view>
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid2.png"></image>
			</view>
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid3.png"></image>
			</view>
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid4.png"></image>
			</view>
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid5.png"></image>
			</view>
			<view class="diygw-avatar radius bg-none">
				<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/grid6.png"></image>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped></style>
